<template>
    <div class="Regis">
        <div class="box">
               <div class="zhuce">
                        <el-form
  :model="ruleForm"
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
  class="demo-ruleForm"
  >
  <el-form-item prop="user">
  <el-input
  type="text"
  placeholder="请输入手机号或者邮箱号"
  required="required"
  v-model="ruleForm.user"
  prefix-icon="el-icon-user-solid"
  ></el-input>
  </el-form-item>
  <el-form-item prop="pass">
  <el-input
  type="password"
  placeholder="请输入密码"
  prefix-icon="el-icon-lock"
  v-model="ruleForm.pass"
   @keyup.enter.native="toSubmitForm('ruleForm')"
  ></el-input>
  </el-form-item>

  <el-form-item prop="checkPass">
  <el-input
  type="password"
  placeholder="请确认密码"
  prefix-icon="el-icon-lock"
  v-model="ruleForm.checkPass"
   @keyup.enter.native="toSubmitForm('ruleForm')"
  ></el-input>
  </el-form-item>

<el-form-item prop="yzPass">
  <el-input
  class="yz"
  type="password"
  placeholder="请输入验证码"
  prefix-icon="el-icon-postcard"
  v-model="ruleForm.yzPass"
   @keyup.enter.native="toSubmitForm('ruleForm')"
  >
  </el-input>
  </el-form-item>
  
  <el-row class="hqyzm"> 
       <el-button class="aaa" @click="fn">获取验证码</el-button>
  </el-row>
  <el-form-item>
  <el-button type="danger" @click="submitForm('ruleForm')" class="zc">立即注册</el-button>
  </el-form-item>
 </el-form>
               </div>
        </div> 
    </div>
</template>
<script>
export default {
    data(){
        var tePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        } else {
          // if (this.ruleForm.yzPass !== '') {
          //   this.$refs.ruleForm.validateField('yzPass');
          // }
          callback();
        }
        
      };
        var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
       var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validateUser = (rule, value, callback) =>{
       if (value === ''){
           callback(new Error('手机号或者邮箱不能为空'))
       }else{
           const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
           const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
           if ((reg.test(value) || reg2.test(value))){
              callback() 
           }else{
               callback(new Error('请输入正确的手机号或者邮箱'))
           }
       }
      };
      return{
         urlQuery: '',
        activeIndex: '1',
         ruleForm:{
              pass: '',
             checkPass: '',
             yzPass: '',
             user: '',

         },
         rules:{
            yzPass: [ { validator: tePass, trigger: 'blur' }],
              pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          user: [{ required: true, validator: validateUser, trigger: 'blur' }],
          
         }
      };
    },
    methods:{
          fn:function(){
              var shijian=60;
              var hq=document.getElementsByClassName('aaa')[0];

            var shi=  setInterval(function () {
                  shijian--;
                  hq.innerHTML=shijian+"s";
                  if(shijian==52){
                      alert("验证码为："+Math.floor(Math.random()*9000+1000));
                  }
                if(shijian==0){
                    alert("验证码已过期，请重新发送")
                    clearInterval(shi);
                    hq.innerHTML="获取验证码";
                    console.log("1");
                }
              },500);
             // alert(shijian+'秒后重新获取验证码');

          },
         submitForm(formName){
             this.$refs[formName].validate((valid) =>{
                  if (valid){
                      alert('submit!');
                  }else{
                       console.log('error submit!!');
                       return false;
                  }
             });
         }
    }
}
</script>


<style scoped>
    .Regis{
    width:100%;
    height: 600px;
    background:  #f3f3f3;
    /* border: red solid; */
  
}
.box{
    background-color: white;
    width: 600px;
    height: 350px;
    position: relative;
    top: 80px;
    margin: 0 auto;
}
.zhuce{
    position: relative;
    top: 30px;
    right: 40px;
}
.yz{
    width: 200px;
    position: relative;
    right:150px;
}
.hqyzm{
    position: relative;
    left: 150px;
    top: -60px;
}
.zc{
    position: relative;
    top: -30px;
    width: 500px;
}
</style>
